<template>
	<view class="my-input" :style="{height:80+statusHeight+'rpx'}">
		<view class="top-input-container">
			<view
				class="top-input"
				:style="{
					marginTop:statusHeight+'rpx',
					marginRight:30+myMarginRight+'rpx'
				}"
				@click="goSearch()"
			>
				<view class="top-icons">
					<uni-icons size="18" type="search" color="#999"></uni-icons>
				</view>
				<view class="top-text">
					请输入诗词名/作者名
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"TopInput",
		data() {
			return {
				statusHeight:40,
				myMarginRight:0
			};
		},
		created() {
			this.getMenuInfo();
		},
		methods:{
			getMenuInfo(){
				let marginTop = uni.getSystemInfoSync();
				marginTop.statusBarHeight&&(this.statusHeight=marginTop.statusHeight*2);
				// #ifdef MP-WEIXIN
				let res = uni.getMenuButtonBoundingClientRect();
				this.statusHeight=res.top*2;
				this.myMarginRight=res.width*2;
				// #endif
			},
			goSearch(){
				uni.navigateTo({
					url:'../../pages/search/search'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
@import './css/TopInput.scss';
</style>
